<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<title>框架类集合</title>
		<link rel="stylesheet" type="text/css" href="../../plugin/highlight/styles/agate.css" />
		<style type="text/css">
			body,h3{margin:0}
			.content{padding:10px}
		</style>
	</head>

	<body>
<div class="content">
<div>
<h3>利用js动态创建css类</h3>
<pre>
<code class="js">Object.prototype.addCSS = function(cssText) {
	 //创建一个style元素   获取head元素
	var style = document.createElement('style'),
	head = document.head || document.getElementsByTagName('head')[0];
	style.type = 'text/css'; //这里必须显示设置style元素的type属性为text/css，否则在ie中不起作用
	if(style.styleSheet) { //IE
		var func = function() {
			try { //防止IE中stylesheet数量超过限制而发生错误
				style.styleSheet.cssText = cssText;
			} catch(e) {

			}
		}
		if(style.styleSheet.disabled) {//如果当前styleSheet还不能用，则放到异步中则行
			setTimeout(func, 10);
		} else {
			func();
		}
	} else { //w3c
		//w3c标准的浏览器中只要创建文本节点插入到style元素中就行了
		var textNode = document.createTextNode(cssText);
		style.appendChild(textNode);
	}
	head.appendChild(style); //把创建的style元素插入到head中   
};
</code>
</pre>
<p>
<pre>
<code class="js">//使用
Object.addCSS('#demo{ height: 30px; background:#f00;}');
</code>
</pre>
</p>
</div>
</div>
	</body>
	<script src="../../plugin/highlight/highlight.pack.js" type="text/javascript" charset="utf-8"></script>
	<script>
		hljs.initHighlightingOnLoad();
	</script>

</html>